1 00:00:00,570 --> 00:00:02,840 Hello and welcome to this lecture. 2 00:00:02,940 --> 00:00:07,930 In this lecture we will be creating the ball. 3 00:00:09,000 --> 00:00:16,780 Let's open up the javascript far from the bounce ball for the soul. 4 00:00:19,170 --> 00:00:27,740 So this is the javascript files so these are the variables from our previous lecture. 5 00:00:28,260 --> 00:00:41,490 So to create a ball will need to create a function that would draw or paint a ball on the compass so 6 00:00:41,490 --> 00:00:45,760 to create the function you type in the word function. 7 00:00:47,660 --> 00:00:50,660 Followed by the name you want to keep the function. 8 00:00:50,850 --> 00:00:53,270 Just call it drop for simplicity 9 00:00:55,850 --> 00:00:59,930 and then you include the parenthesis way by using this brand. 10 00:00:59,930 --> 00:01:01,170 This is here in red. 11 00:01:01,400 --> 00:01:07,910 It indicates a function and then to specify what the function is going to do. 12 00:01:07,910 --> 00:01:11,180 We need to include that in curly braces. 13 00:01:11,210 --> 00:01:16,380 So please call it braces and then tab to separate them. 14 00:01:16,580 --> 00:01:26,180 And in between the curly braces is where will specify the instructions that the function draw will perform 15 00:01:27,500 --> 00:01:29,630 when creating any ship. 16 00:01:29,630 --> 00:01:35,350 You need to begin at two methods of functions core. 17 00:01:35,360 --> 00:01:42,730 The first is called to begin with to indicate where the shape will begin from. 18 00:01:42,850 --> 00:01:48,390 So I will create a b c t X.. 19 00:01:49,600 --> 00:01:59,410 The city X references the context so be the context Dot be in 20 00:02:01,930 --> 00:02:03,900 half. 21 00:02:03,980 --> 00:02:07,340 Notice the way I retain the name. 22 00:02:07,340 --> 00:02:09,400 Here the method begin. 23 00:02:09,410 --> 00:02:10,110 Path. 24 00:02:10,310 --> 00:02:13,550 So it begins with lower and then upper. 25 00:02:13,580 --> 00:02:16,630 The first letter of the second word is Opper. 26 00:02:16,970 --> 00:02:18,710 Okay so that's the former. 27 00:02:18,860 --> 00:02:21,480 So you begin with two methods here. 28 00:02:21,490 --> 00:02:31,820 The first is a begin and then you've got the city X reference to the contex And there we end it with 29 00:02:31,820 --> 00:02:32,810 a close 30 00:02:38,690 --> 00:02:41,230 close path. 31 00:02:42,020 --> 00:02:49,930 Again notice note is the case lower and then the first letter Opper. 32 00:02:50,060 --> 00:02:58,260 Okay and then we'll put a semicolon there and a semicolon there. 33 00:02:58,370 --> 00:03:07,670 Note is that this sticks here is this variable here that is accessing this get contex which would be 34 00:03:07,670 --> 00:03:09,590 responsible for the drawing. 35 00:03:09,610 --> 00:03:12,050 Any drawing that goes on the combat's. 36 00:03:12,180 --> 00:03:15,210 So we've got the beginning part. 37 00:03:15,230 --> 00:03:19,040 This is where it will start from the drawing of the shape. 38 00:03:19,250 --> 00:03:21,510 And this is where it will end. 39 00:03:21,650 --> 00:03:28,910 In between We'll need to specify various. 40 00:03:29,660 --> 00:03:36,700 We need to define the type of shape we are trying to paint on the canvas. 41 00:03:36,980 --> 00:03:45,900 We do that using bct it's again contex opt for a ball or an arc. 42 00:03:46,220 --> 00:03:57,840 We use hard which will be used to draw like a ball or paint a ball or a circle on the comebacks. 43 00:03:58,250 --> 00:03:59,930 This method here. 44 00:03:59,960 --> 00:04:06,420 This arc method takes in six parameters. 45 00:04:06,910 --> 00:04:16,580 Okay so the first parameter he takes is the x and y axis. 46 00:04:16,580 --> 00:04:19,190 So in this case I'm going to give the X. 47 00:04:19,200 --> 00:04:21,990 Who's going to make it to 20. 48 00:04:22,130 --> 00:04:24,610 That's all it takes. 49 00:04:24,650 --> 00:04:28,200 Now make there why 140. 50 00:04:30,390 --> 00:04:41,510 Okay so this is the x and y coordinates the next parameter it takes is the Ark. 51 00:04:41,670 --> 00:04:43,710 This ark method the radius. 52 00:04:43,710 --> 00:04:47,430 This would mean how round we want this circle to be. 53 00:04:47,740 --> 00:04:50,600 So I'll give it I make it 20 54 00:04:53,440 --> 00:04:54,140 next. 55 00:04:54,180 --> 00:04:59,840 We need to indicate the start angle and the end angle. 56 00:04:59,940 --> 00:05:05,620 So I wanted to start from zero. 57 00:05:06,690 --> 00:05:12,460 Paul comma to separate the value and to to end it. 58 00:05:12,480 --> 00:05:23,490 I'm going to use the javascript Mat's object to create a perfect circle so to do that and do a mass 59 00:05:27,510 --> 00:05:31,330 dot P Hi. 60 00:05:33,690 --> 00:05:36,380 Times two. 61 00:05:37,560 --> 00:05:41,400 So that will create a perfect circle. 62 00:05:41,520 --> 00:05:49,230 So this is the this is where it starts and it will end with this perfect circle here using the javascript 63 00:05:49,230 --> 00:05:52,150 Mat's object of maths. 64 00:05:56,310 --> 00:06:09,120 The final message the final parameters it takes is you have a value to determine if this call will be 65 00:06:09,180 --> 00:06:12,990 clockwise or anticlockwise. 66 00:06:13,020 --> 00:06:20,080 So the default false for clock for clock work if you want it to be clockwise. 67 00:06:20,080 --> 00:06:21,780 It will be false. 68 00:06:21,780 --> 00:06:29,600 The default is anticlockwise which is true such and I made this in a kiss. 69 00:06:30,360 --> 00:06:31,820 Right so this is false. 70 00:06:31,830 --> 00:06:36,510 Which means I want it to be clockwise. 71 00:06:36,660 --> 00:06:44,630 So if I specified true or didn't specify anything then it'll assume the default which is anticlockwise. 72 00:06:44,790 --> 00:06:52,000 So that is the direction in which circle of the ball will be formed. 73 00:06:52,890 --> 00:07:04,500 This barometer here before us determines the direction in which the call is drawn to determine the direction 74 00:07:04,560 --> 00:07:06,890 of the drawing it is optional. 75 00:07:06,900 --> 00:07:14,090 You don't have to include it but if you don't include it it will assume the default which is a. clockwise. 76 00:07:14,100 --> 00:07:23,500 Just remember that okay so we puts we're finished that one put a semicolon no next. 77 00:07:23,580 --> 00:07:34,040 We want to define a method that we can use to give column to the ball or the circle. 78 00:07:34,050 --> 00:07:40,400 So again we go see x dot feel 79 00:07:43,920 --> 00:07:45,040 feel stale. 80 00:07:45,210 --> 00:07:53,080 So what this method will do it will give the kolok to the ball. 81 00:07:53,490 --> 00:07:57,630 So the value of this. 82 00:07:58,140 --> 00:08:04,010 Given it read you can give it whatever you like. 83 00:08:04,710 --> 00:08:08,950 Okay so put semicolon next. 84 00:08:09,000 --> 00:08:17,620 This is a method that will do the fill in next and need to specify the actual feeling to take place. 85 00:08:19,290 --> 00:08:26,130 So this is a method that would do the feel in use in this call or read 86 00:08:29,220 --> 00:08:29,950 and out. 87 00:08:30,000 --> 00:08:32,860 And that with a semi colon. 88 00:08:35,160 --> 00:08:45,900 All right so we are practically done so that there's a method to apply a lot and this city has I feel 89 00:08:45,930 --> 00:08:49,000 is what will do the actual colouring. 90 00:08:49,120 --> 00:08:54,120 This is the end of the ship. 91 00:08:54,240 --> 00:08:56,830 So we've got to begin to where the ships begin. 92 00:08:56,850 --> 00:09:00,000 And then we've got the close and in between. 93 00:09:00,000 --> 00:09:07,670 We've got other methods that are responsible for creating or painting the ball on the compass. 94 00:09:08,520 --> 00:09:19,290 Finally we are going to create an infinite loop that will make the ball painted on the canvas this time 95 00:09:19,350 --> 00:09:28,230 it will repeatedly paint the bore every interval we set so to create an interval into to create an infinite 96 00:09:28,230 --> 00:09:34,920 loop we need to use a javascript font channel called set interval. 97 00:09:35,190 --> 00:09:39,300 So I'll just type in set interval 98 00:09:45,330 --> 00:09:49,370 and then the parameter if I will pass it. 99 00:09:49,680 --> 00:09:56,250 The draw function here which is drawn and then pass in the milliseconds. 100 00:09:56,280 --> 00:10:06,150 I wanted to keep painting the ball on the comeback so pass it value of 10 milliseconds. 101 00:10:06,150 --> 00:10:16,270 So what this meant is that it will paint the ball on the come comebacks every 10 millisecond continuously. 102 00:10:17,130 --> 00:10:21,300 So let's say how I could save this group so far. 103 00:10:21,330 --> 00:10:28,920 What these set interval will do it will it creates an infinite loop. 104 00:10:29,070 --> 00:10:39,090 So what it will allow the draw function to paint or draw a ball on the compass every Meely second forever 105 00:10:39,210 --> 00:10:45,870 until it stops so it's an infinite loop so it will go on painting or this time every 10 milliseconds 106 00:10:46,200 --> 00:10:48,790 it'll paint the ball on the compass. 107 00:10:49,410 --> 00:10:58,510 Okay the code is saved through a lesson view that lets go to the next and try and open the file. 108 00:10:59,430 --> 00:11:09,510 So I click on my index double click while LA so that's the ball that we've created because the ball 109 00:11:09,600 --> 00:11:12,180 is not moving at the moment. 110 00:11:12,180 --> 00:11:21,650 You will not notice that it's being repainted constantly because of the infinite loop of this set interval. 111 00:11:21,960 --> 00:11:27,020 This is because the ball is not moving so you don't notice it but it's actually repainting. 112 00:11:27,060 --> 00:11:30,430 Each time every 10 milliseconds. 113 00:11:31,050 --> 00:11:34,800 So that's it for this lecture on drawing the ball. 114 00:11:34,820 --> 00:11:40,070 Apologize if it's taken too long on this lecture in the next lecture. 115 00:11:40,080 --> 00:11:43,280 We are going to try to move the ball. 116 00:11:43,560 --> 00:11:44,970 Thank you for watching. 117 00:11:44,970 --> 00:11:46,320 Bye for an hour.